<template>
    <div class="courseInfo">
        <Title2>
            <van-icon name="arrow-left" slot="back" @click="$router.go(-1)" />
            <span slot="title">
                <div v-if="top>=0">课程详情</div>
                <div  class="title_1" v-else >
                    <div>课程介绍</div>
                    <div>课程大纲</div>
                    <div>课程评价</div>
                </div>
            </span>
            <van-icon name="cluster-o" slot="search" />
        </Title2>
        <div class="container">
            <div class="wrapper">
                <header>
                    <div class="title">
                        <span>{{info.title}}</span>
                        <van-icon name="like-o" />
                    </div>
                    <div  class="price">{{info.price}}.00</div>
                    <div class="hour">
                        <span>共{{info.total_periods}}课时</span> 
                        |
                        <span>{{info.sales_num}}人已报名</span>
                    </div>
                    <div class="timer">
                        开课时间
                        <span>
                            {{info.start_play_date | fomartTime("yyyy-MM-dd hh:mm")}}——{{info.end_play_date | fomartTime("yyyy-MM-dd hh:mm")}}
                        </span>
                    </div>
                </header>
                <div class="teacher">
                    <div class="title">教学团队</div>
                    <div class="teacher-content">
                        <div v-for="(item, index) in teachers" :key="index" class="teacher-item">
                            <img :src="item.avatar" alt="">
                            <p>{{item.teacher_name}}</p>
                        </div>
                    </div>
                </div>
                <div class="info">
                    <div class="title">课程介绍</div>
                    <div v-html="info.course_details"></div>
                </div>
                <div class="dagang">
                    <div class="title">课程大纲</div>
                    <div v-for="(item, index) in dagang" :key="index">
                        {{item}}
                    </div>
                </div>
                <div class="pinglun">
                    <div class="title">课程评论</div>
                    <div v-for="(item, index) in dagang" :key="index">
                        {{item}}
                    </div>
                    <div v-if="pinglun.length==0">
                        <img src="http://demo.qlwb.com.cn/_nuxt/img/59e81b9.png" alt="" width="100%">
                        <p style="textAlign: center">还没有评论</p>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <button @click="order" v-if="info.sale_type==1">立刻报名</button>
            <button v-else>立刻学习</button>
        </footer>
    </div>
</template>

<script>
import config from '../untils/netWork/config';
import {courseInfo,getSysCourse,downOrder} from '../untils/netWork';
import Title2 from '../components/common/Title2';
import BScroll from "better-scroll";
    export default {
        data:()=>({
            info:{},
            teachers:[],
            top: 0,
            BScroll:null,
            dagang:[],
            pinglun:[],
        }),
        methods:{
            order(){
                
                var data={
                    shop_id: this.info.id,
                    type: this.info.course_type
                }
                downOrder(data).then(res=>{
                    if(res.code===200){
                        this.$set(this.info,"sale_type",0)
                    }
                })
                console.log(this.info)
            }
        },
        filters:{
            filterTime(val){
                var date=new Date(val).toLocaleString();
                return date                
            }
        },
        components:{
            Title2,
        },
        activated(){
            config.path.courseInfo=`/api/app/courseInfo/basis_id=${this.$route.params.basis_id}`
            courseInfo().then(res=>{
                this.info=res.data.info;
                this.teachers=res.data.teachers;
                console.log(res)
            });
            // var data={
            //     id:99
            // };
            // getSysCourse(data).then(res=>{
            //     console.log(res)
            // });
            this.BScroll=new BScroll(".container",{
                probeType: 3
            });
            this.BScroll.on('scroll', (pos) => {
                setTimeout(()=>{
                    this.top=pos.y
                },500)

            })
            
        },

    }
</script>

<style lang="scss" scoped>
.courseInfo{
    width: 100%;
    height: 667px;
    position: relative;
    background: rgb(245, 245, 245);
    ;
}
.container{
    width: 100%;
    height: 568px;
    overflow: hidden;
    .wrapper{
        width: inherit;
        header{
            padding: 10px;
            font-size: 16px;
            margin-bottom: 10px;
            background: white;
            div{
                height: 30px;
                line-height: 30px;
            }
            .title{
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
            }
            .price{
                font-size: 17px;
                color: orange;
            }
            .timer{
                span{
                    font-size: 12px;
                }
            }
        }
        .teacher{
            padding: 10px ;
            background: white;
            .title{
                height: 30px;
                line-height: 30px;
                font-size: 16px;
            }
            .teacher-content{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                text-align: center;
                flex-flow: wrap;
                
                .teacher-item{
                    width: 70px;
                    height: 70px;
                    margin-right: 10px;
                    img{
                        width: 30px;
                        height: 30px;
                        border-radius: 30px;
                        margin: 10px 0;
                    }
                    p{
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
        .info{
            padding: 10px;
            line-height: 30px;
            margin: 10px 0;
            background: white;
        }
        .dagang,
        .pinglun{
            min-height: 50px;
            padding: 10px;
            background: white;
            margin-top: 10px;
            .title{
                line-height: 30px;
            }
        }
        
    }
}
footer{
    width: 100%;
    margin: 0 auto;
    height: 43px;
    background: red;
    position: absolute;
    bottom: 0;
    button{
        width: 100%;
        height: 100%;
        background: rgb(235, 97, 0);
        border:  0;
        outline: none;
        color: white;
        font-size: 16px;
    }
}
</style>